<div class="page">
    <h1>模板表单 <b>TemplateForm</b></h1>
    <div class="line"></div>



    <div class="layui-row layui-col-space20">
        <div class="layui-col-md6">
            <h3>自动生成HTML的 表单组件</h3>
            <br>
            <p>
                根据数组来半段是否在 一个 layui-row 中进行显示，
                <br>并且可以控制每一个 col 元素的宽度,
                <br>可以不用书写 html 元素
                <br>其他表单元素配置参见 表单元素文档进行配置
            </p>
            <div class="line"></div>
            <div id="form"></div>
            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <div class="layui-input-block">
                    <button type="button" type="button" class="layui-btn layui-btn-normal" id="getEvent">取值</button>
                    <button type="button" type="button" class="layui-btn layui-btn-normal" id="setEvent">赋值</button>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <pre class="line-numbers"><code class="language-js">// 创建表单元素
var _form = icu.templateForm({
    labelwidth: 110, // labelwidth 整体控制表单前方元素宽度
});
// 为表单添加元素
// 基础数据结构为  [ [表单元素1,表单元素2],[表单元素1,表单元素2] ];
// 第一层数组生成 layui-row,
// 第二层数组生成 layui-col-md*, col 值由元素自定义设置，默认为12
_form.$setOptions([
    [{
        key: 'string',
        type: 'input',
        formlabel: '单行文本',
        col: 6, // 代表div class 中 包含 layui-col-md6
        verify: {
            text: '单行文本',
            rules: ['notNull'] // notNull 字段控制是否显示必填项
        },
    }, {
        key: 'select',
        type: 'select',
        formlabel: '下拉菜单',
        col: 6,
        data: 'OptionSide:Gender',
        verify: {
            text: '下拉菜单',
            rules: 'notNull' // notNull 字段 不在数组中也可以设置
        },
    }], [{
        key: 'inputDate',
        type: 'inputDate',
        formlabel: '日期选择器',
        col: 12,
        required: true, // 也可以不通过 验证方法，单独实现显示必填项
    }]
    ...
]);
// 渲染表单元素
this.$el.find('#form').append(_form.$html);

// 取值方法
this.$el.find('#getEvent').click(() => {
    _form.get(function (value) {
        icu.alert.normal({
            text: JSON.stringify(value)
        })
    });
});
// 赋值方法
this.$el.find('#setEvent').click(() => {
    _form.set({
        a: '123',
        bb: 'qwe',
        cc: 'asd',
        ccc: 'zxc',
        string: 'string',
        select: 0,
    });
});
</code></pre>
        </div>

    </div>
</div>